<template>
  <div>

    <div class="book-category-container">
      <h2 class="category-title">书籍分类</h2>
      <table class="book-select-table">
        <tr>
          <th>语言类型:</th>
          <td>
            <el-radio-group @change="getPageBook" v-model="pageData.language">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button v-for="language in languageOptions" :key="language" :label="language">{{ language }}</el-radio-button>
            </el-radio-group>
          </td>
        </tr>
        <tr class="spacing-row"></tr>
        <tr>
          <th>书籍类型:</th>
          <td>
            <el-radio-group @change="getPageBook" v-model="pageData.typeId">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button v-for="typeId in typeIdOptions" :key="typeId" :label="typeId">{{ typeNamesMap[typeId] || typeId }}</el-radio-button>
            </el-radio-group>
          </td>
        </tr>
      </table>
    </div>

    <!-- 书籍展示区域 -->
    <div style="width: 80%; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto">
      <div class="bookInfoList" @click="toBookDetail(bookInfo)" v-for="bookInfo in bookInfoList" :key="bookInfo.id">
        <img :src="bookInfo.picture" alt="Book Cover">
        <p>{{ bookInfo.name }}</p>
      </div>
    </div>
    <div style="display: flex; justify-content: center; margin-top: 20px;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageData.page"
          :page-size="pageData.size"
          layout="total,prev, pager, next, jumper"
          :total="pageData.totalPage">
      </el-pagination>
    </div>
  </div>
</template>


<script>
export default {
  name: "StacksPage",
  data() {
    return {
      typeNamesMap: {},
      bookInfoList:[],
      languageOptions: [],
      typeIdOptions: [],
      pageData:{
        page:1,
        size:20,
        totalPage:0,
        language:'',
        typeId:''
      }
    }
  },
  mounted() {
    this.getPageBook()
    this.fetchAllTypes();
    this.fetchTypeNames()
  },
  methods: {
    //跳转到书籍详情页
    toBookDetail(bookInfo){
      let id=bookInfo.id
      this.$router.push({path: 'book_detail', query: {id}})
    },
    handleSizeChange(val) {
      this.pageData.page=val
      this.getPageBook()
    },
    handleCurrentChange(val) {
      this.pageData.page=val
      this.getPageBook()
    },
    async getPageBook() {
      const {data:res} = await this.$axios.get("/bookInfo/pageBook",{params:this.pageData})
      this.bookInfoList = res.data.records
      this.pageData.totalPage=res.data.total
    },
    async fetchAllTypes() {
      const { data: languageRes } = await this.$axios.get("/bookInfo/getAllLanguages");
      this.languageOptions = languageRes.data;
      const { data: typeRes } = await this.$axios.post("/bookInfo/getAllTypes");
      this.typeIdOptions = typeRes.data;
    },
    async fetchTypeNames() {
      const { data: res } = await this.$axios.get("typeInfo/getAllTypeNames");
      this.typeNamesMap = res.data.reduce((map, type) => {
        map[type.id] = type.name;
        return map;
      }, {});
    },
  }
}
</script>

<style scoped>

.spacing-row {
  height: 30px; /* 根据需要调整高度 */
}
.el-radio-button {
  margin-right: 10px;
}

.el-radio-button__inner {
  padding: 8px 20px;
  font-size: 14px;
  border-radius: 4px;
}

.el-radio-button:first-child .el-radio-button__inner {
  border-radius: 4px 0 0 4px;
}

.el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 4px 4px 0;
}
.book_select{
  width: 100%;
}
.book_select th {
  padding: 10px;
  text-align: left;
  font-size: 14px;
  background-color: #eee;
  font-weight: 400;
  width: 80px;
  border-bottom: #ccc 1px solid;
  border-right: #ccc 1px solid;
}
.book_select td {
  padding: 10px;
  text-align: left;
}
.book-category-container {
  width: 78%;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.category-title {
  text-align: left;
  color: #333;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
}

.book-select-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.book-select-table th {
  text-align: right;
  padding-right: 10px;
  vertical-align: top;
  font-weight: normal;
  color: #555;
}

.book-select-table td {
  padding-left: 10px;
}
.bookInfoList {
  margin-bottom: 6px;
  width: 19%;
  height: 300px;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bookInfoList img {
  width: 100%;
  height: 85%;
  transition: transform 0.3s ease;
}

.bookInfoList img:hover {
  transform: scale(1.1);
}

.bookInfoList p {
  margin: 0;
  margin-top: 12px;
  transition: color 0.3s ease;

}

.bookInfoList p:hover {
  color:  #ffa500; /* 橙色 */

}

</style>